<template>
  <div>
    <div class="page_title">活动管理</div>
    <FormTable :formRules="formRules" :tableData="tableData" :columns="columns" :total="total" :currentPage="pageIndex"
      :pageSize="pageSize" @changeTableData="changeTableData" @queryTable="queryTable">
      <template #tableTabs>
        <div style="display: flex;justify-content: end;margin-bottom: 16px;">
          <el-button type="primary" @click="edit1()">新增</el-button>
        </div>
      </template>
      <template #operator="{ slotProps }" class="table_button_list">
        <template v-if="slotProps.isPublish == 1">
          <span class="table_button" @click="detail(slotProps)">查看</span>
          <span class="table_button" style="margin-left: 10px;" @click="edit2(slotProps)">修改</span>
        </template>
        <span v-else class="table_button" @click="edit1(slotProps)">修改</span>
      </template>
    </FormTable>
    <hdglForm v-model="dialogVisible" :dataForm="dialogForm" v-if="dialogVisible" @close="dialogVisible = false"
      :isDetail="isDetail" :isFabu="isFabu" @getDatas="queryTable()" />
  </div>
</template>
<script>
import FormTable from "@/components/FormTable/index.vue"
import hdglForm from "./hdglForm.vue"
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { getPortalExerciseInfoByPage } from "@/api/api"
import moment from 'moment'

export default defineComponent({
  name: '',
  components: { FormTable, hdglForm },
  setup () {
    const dataMap = reactive({
      tableData: [],
      formRules: [
        {
          type: "input",
          field: "exerciseName",
          title: "活动名称",
          value: "",
        }
      ],
      searchForm: {
        exerciseName: "",
      },
      columns: [
        {
          label: "序号",
          type: "index",
          width: '70px'
        },
        {
          label: "活动名称",
          prop: "exerciseName",
        },
        {
          label: "标签",
          prop: "label",
        },
        {
          label: "活动时间",
          prop: "exerciseTime",
          align: 'center',
          formatter (label, row) {
            return `${moment(row.exerciseStartTime).format('YYYY-MM-DD')}~${moment(row.exerciseEndTime).format('YYYY-MM-DD')}`
          },
        },
        {
          label: "发布部门",
          align: 'center',
          prop: "departName",
        },
        {
          label: "是否发布",
          align: 'center',
          width: '80px',
          prop: "isPublish",
          formatter (label, row) {
            return label == 1 ? "已发布" : "未发布"
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
          align: 'center',
          width: '160px'
        },
        {
          prop: 'operator',
          label: "操作",
          align: 'center',
          width: '120px'
        },
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      isDetail: false,
      isFabu: false,
      dialogForm: {},
    })
    const methodsMap = reactive({
      detail (items) {
        dataMap.dialogForm = items
        dataMap.isDetail = true
        dataMap.isFabu = false
        dataMap.dialogVisible = true
      },
      edit2 (items) {
        if (items.draft)
        {
          try
          {
            let temp = JSON.parse(items.draft)
            dataMap.dialogForm = {
              ...temp,
              exerciseStartTime:moment(temp.exerciseStartTime).format("YYYY-MM-DD hh:mm:ss"),
              exerciseEndTime:moment(temp.exerciseEndTime).format("YYYY-MM-DD hh:mm:ss")
            }
          } catch (error)
          {
            dataMap.dialogForm = items
          }
        }else{
          dataMap.dialogForm = items
        }
        dataMap.isDetail = false
        dataMap.isFabu = true
        dataMap.dialogVisible = true
      },
      edit1 (items) {
        if (items)
        {
          dataMap.dialogForm = items
        } else
        {
          dataMap.dialogForm = {
            exerciseContent: ""
          }
        }
        dataMap.isDetail = false
        dataMap.isFabu = false
        dataMap.dialogVisible = true
      },
      changeTableData (pageNum, pageSize) {
        dataMap.pageIndex = pageNum
        dataMap.pageSize = pageSize
        methodsMap.getDatas()
      },
      getDatas () {

        console.log("开始调用列表", Date.now())
        getPortalExerciseInfoByPage({
          "exerciseContent": "",
          "exerciseEndTime": "",
          "exerciseStartTime": "",
          "exerciseName": dataMap.searchForm.exerciseName,
          "isPublish": "",
          "pageValue": {
            "pageIndex": dataMap.pageIndex,
            "pageSize": dataMap.pageSize,
          }
        }).then((res) => {
          console.log("列表调用结束", Date.now())
          console.log("列表数量", res.data.total)
          dataMap.tableData = res.data.records
          dataMap.total = res.data.total
        })
      },
      queryTable (params) {
        dataMap.searchForm = params || {}
        dataMap.pageIndex = 1
        methodsMap.getDatas()
      }
    })
    onMounted(() => {
      methodsMap.getDatas()
    })
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
    }
  },
})
</script>
<style lang="scss" scoped></style>